<template>
	<view class="content">
		<view class="sx-content"><view class="sx-btn" @click="sShow = true">筛选</view></view>
		<view class="list" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
		    <!-- ref="sibList" @isRefresh='isRefresh' @scrolltolowerFn="scrolltolowerFn" 此三个必须写 -->
		    <sib-list ref="sibList" @scrolltolowerFn="scrolltolowerFn" :scrollHeight="'100vh'">
		        <!-- 内部block可自定义 -->
		        <block class="" slot="sibScrollList">
					<view class="search-table search-table-fix">
						<u-table>
							<u-tr>
								<u-th>
									<view class="th1">
										院校名称
									</view>
								</u-th>
								<u-th> 
									<view class="th" @click="enroll('school_rankings.enroll_max')">
										录取最高同位分
										<view class="arrow-fill">
											<view><u-icon name="arrow-up-fill" size="18" class="arrow-up" :color="sort_key=='school_rankings.enroll_max'&&sort_type=='asc'?'#000':'#fff'"></u-icon></view>
											<view><u-icon name="arrow-down-fill" size="18" class="arrow-down" :color="sort_key=='school_rankings.enroll_max'&&sort_type=='desc'?'#000':'#fff'"></u-icon></view>
										</view>
									</view>
								</u-th>
								<u-th>
									<view class="th" @click="enroll('school_rankings.enroll_avg')">
										录取平均同位分
										<view class="arrow-fill">
											<view><u-icon name="arrow-up-fill" size="18" class="arrow-up" :color="sort_key=='school_rankings.enroll_avg'&&sort_type=='asc'?'#000':'#fff'"></u-icon></view>
											<view><u-icon name="arrow-down-fill" size="18" class="arrow-down" :color="sort_key=='school_rankings.enroll_avg'&&sort_type=='desc'?'#000':'#fff'"></u-icon></view>
										</view>
									</view>
								</u-th>
								<u-th>
									<view class="th" @click="enroll('school_rankings.enroll_min')">
										录取最低同位分
										<view class="arrow-fill">
											<view><u-icon name="arrow-up-fill" size="18" class="arrow-up" :color="sort_key=='school_rankings.enroll_min'&&sort_type=='asc'?'#000':'#fff'"></u-icon></view>
											<view><u-icon name="arrow-down-fill" size="18" class="arrow-down" :color="sort_key=='school_rankings.enroll_min'&&sort_type=='desc'?'#000':'#fff'"></u-icon></view>
										</view>
									</view>
								</u-th>
							</u-tr>
							<u-tr v-for="(item,i) in sList" :key="i">
								<u-td><view class="search-href" @click="goto('../pages/universityDetail',item)">{{item.title}}</view></u-td>
								<u-td>{{item.analyze_type_1_data.enroll_max?item.analyze_type_1_data.enroll_max:'--'}}</u-td>
								<u-td>{{item.analyze_type_1_data.enroll_avg?item.analyze_type_1_data.enroll_avg:'--'}}</u-td>
								<u-td>{{item.analyze_type_1_data.enroll_min?item.analyze_type_1_data.enroll_min:'--'}}</u-td>
							</u-tr>
						</u-table>
					</view>
				</block>
		    </sib-list>
		</view>
		
		<u-popup v-model="sShow" mode="right" width="80%">
			<view class="search-type">
				<view class="item"><text class="label">分析方式：</text> <view class="select" @click="analysisShow = true">{{objName.analyze_name}} <u-icon name="arrow-down" class="down" color="#999"></u-icon></view></view>
				<view class="item"><text class="label">往年数据：</text> <view class="select" @click="oldShow = true">{{objName.year}} <u-icon name="arrow-down" class="down" color="#999"></u-icon></view></view>
				<view class="item"><text class="label">录取批次：</text> <view class="select" @click="enrollShow = true">{{objName.batch_name}} <u-icon name="arrow-down" class="down" color="#999"></u-icon></view></view>
				<view class="item"><text class="label">院校类型：</text> <view class="select" @click="schoolShow = true">{{objName.school_name}} <u-icon name="arrow-down" class="down" color="#999"></u-icon></view></view>
				<view class="item"><text class="label">院校类别：</text> <view class="select" @click="typeShow = true">{{objName.level_name}} <u-icon name="arrow-down" class="down" color="#999"></u-icon></view></view>
				<view class="item"><text class="label">院校所在地：</text> <view class="select" @click="cityShow = true">{{objName.area_name?objName.area_name:'全国'}} <u-icon name="arrow-down" class="down" color="#999"></u-icon></view></view>
				<view class="item"><text class="label">筛选范围：</text> <view class="select"><u-input v-model="obj.screen_fraction" type="tel" /></view></view>
				<view class="type-btn"><view @click="reset">重置</view><view @click="confirm">确定</view></view>
			</view>
		</u-popup>
		
		<u-select v-model="analysisShow" :list="analysisList" @confirm="confirm1"></u-select>
		<u-select v-model="oldShow" :list="oldList" @confirm="confirm2"></u-select>
		<u-select v-model="enrollShow" :list="enrollList" @confirm="confirm3"></u-select>
		<u-select v-model="schoolShow" :list="schoolList" @confirm="confirm4"></u-select>
		<u-select v-model="typeShow" :list="typeList" @confirm="confirm5"></u-select>
		<u-select v-model="cityShow" :list="cityList" @confirm="confirm6"></u-select>
	</view>
</template>

<script>
	import sibList from '@/components/sib-list/sib-list.vue'
	export default {
		components: {
		    sibList
		},
		data() {
			return {
				sList: [],
				obj: {
					"page": 1,
					"t_time": '',
					"analyze_type": '',
					"year": '',
					"batch_type": '',
					"level_type": '',
					"school_type": '',
					"school_province_code": '',
					"area_list": "",
					"screen_fraction": ''
				},
				objCopy:{},
				objName: {
					year: '',
					analyze_name: '',
					analyze_type: '',
					batch_name: '',
					batch_type: '',
					school_name: '',
					school_type: 0,
					level_name: '',
					level_type: '',
					area_name: '',
					area_list: ''
				},
				sShow: false,
				analysisShow: "",
				analysisList: [],
				oldShow: "",
				oldList: [],
				enrollShow: '',
				enrollList :[],
				schoolShow: '',
				schoolList: [],
				typeShow: '',
				typeList: [],
				cityShow: '',
				cityList: [],
				sort_key: '',
				sort_type: ''
			}
		},
		onLoad(options) {
			this.obj = JSON.parse(options.obj);
			this.objCopy = JSON.parse(options.obj);
			this.fuzzy_list('first');
			this.initData();
			
		},
		methods: {
			goto(name, item) {
				uni.navigateTo({
					url: name+"?school_code="+item.code
				});
			},
			enroll(type) {
				if(this.sort_key !== type) {
					this.sort_type = 'asc';
					this.sort_key = type;
				}else if(this.sort_key == type && this.sort_type == 'asc') {
					this.sort_type = 'desc';
				}else if(this.sort_key == type && this.sort_type == 'desc') {
					this.sort_type = '';
					this.sort_key = '';
				}
				this.obj.page = 1;
				this.obj.sort_key = this.sort_key;
				this.obj.sort_type = this.sort_type;
				this.fuzzy_list('first');
			},
			initData() {
				let condition = uni.getStorageSync('condition');
				this.analysisList = [];
				for (let s of condition.analyze_type_list) {
					if(s.type == this.obj.analyze_type) {
						this.objName.analyze_type = s.type;
						this.objName.analyze_name = s.name;
					}
					this.analysisList.push({value:s.type, label:s.name})
				}
				this.oldList = [];
				for (let s of condition.recruiting_year) {
					if(s == this.obj.year) {
						this.objName.year = s;
					}
					this.oldList.push({value:s, label:s})
				}
				this.enrollList = [];
				for (let s of condition.batch_type_list) {
					if(s.type == this.obj.batch_type) {
						this.objName.batch_type = s.type;
						this.objName.batch_name = s.name;
					}
					this.enrollList.push({value:s.type, label:s.name})
				}
				this.schoolList = [];
				for (let s of condition.school_type_list) {
					if(s.type == this.obj.school_type) {
						this.objName.school_type = s.type;
						this.objName.school_name = s.name;
					}
					this.schoolList.push({value:s.type, label:s.name})
				}
				this.typeList = [];
				for (let s of condition.level_type_list) {
					if(s.type == this.obj.level_type) {
						this.objName.level_type = s.type;
						this.objName.level_name = s.name;
					}
					this.typeList.push({value:s.type, label:s.name})
				}
				this.cityList = [];
				for (let s of condition.school_province_code) {
					for (let city of s.child_list) {
						if(city.province_code == this.obj.school_province_code) {
							this.objName.area_list = city.province_code;
							this.objName.area_name = city.province_str;
						}
						this.cityList.push({value:city.province_code, label:city.province_str})
					}
				}
				if(!this.obj.area_list) {
					this.objName.area_list = '';
					this.objName.area_name = '';
				}
			},
			// 重置
			reset() {
				this.initData();
				this.obj.screen_fraction = '';
			},
			confirm() {
				this.obj.analyze_type = this.objName.analyze_type;
				this.obj.year = this.objName.year;
				this.obj.batch_type = this.objName.batch_type;
				this.obj.school_type = this.objName.school_type;
				this.obj.level_type = this.objName.level_type;
				this.obj.school_province_code = this.objName.area_list;
				this.obj.sort_key = '';
				this.obj.sort_type = '';
				this.sort_type = '';
				this.sort_key = '';
				this.fuzzy_list('first');
			},
			confirm1(e) {
				this.objName.analyze_type = e[0].value;
				this.objName.analyze_name = e[0].label;
			},
			confirm2(e) {
				this.objName.year = e[0].value;
			},
			confirm3(e) {
				this.objName.batch_type = e[0].value;
				this.objName.batch_name = e[0].label;
			},
			confirm4(e) {
				this.objName.school_type = e[0].value;
				this.objName.school_name = e[0].label;
			},
			confirm5(e) {
				this.objName.level_type = e[0].value;
				this.objName.level_name = e[0].label;
			},
			confirm6(e) {
				this.objName.area_list = e[0].value;
				this.objName.area_name = e[0].label;
			},
			// 刷新touch监听
			touchstart: function(e) {
			    this.$refs.sibList.refreshStart(e);
			},
			touchmove: function(e) {
			    this.$refs.sibList.refreshMove(e);
			},
			touchend: function(e) {
			    this.$refs.sibList.refreshEnd(e);
			},
			scrolltolowerFn: function() {
			    uni.showLoading({
			        title: '加载中...',
			        mask: true
			    })
				this.obj.page++;
				this.fuzzy_list();
			},
			fuzzy_list(type) {
				uni.showLoading({
				    title: '加载中...',
				    mask: true
				})
				this.http({
					url: `api/v1/choose_school/fuzzy_list`,
					method: 'GET',
					data: this.obj,
					success: res => {
						uni.hideLoading()
						if(res.errcode == 0) {
							this.sShow = false;
							if(res.result.list.length>0) {
								if(type == 'first') {
									this.obj.page++;
									this.fuzzy_list();
									this.sList = [];
								}
								for (let s of res.result.list) {
									this.sList.push(s);
								}
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.sx-btn {
		float: right;
		border-radius: 100rpx;
		background-color: #00CA8A;
		color: #FFFFFF;
		padding: 4rpx 20rpx;
		margin: 6rpx 20rpx 6rpx 0;
		position: relative;
		z-index: 1;
	}
	.search-table {
		.search-href {
			color: #3a81ff;
		}
		.tran {
			color: transparent;
		}
	}
	.search-type {
		padding: 50rpx;
		.item {
			margin-bottom: 20rpx;
		}
		.select {
			display: inline-block;
			border: 1px solid #999999;
			border-radius: 8rpx;
			width: 306rpx;
			height: 70rpx;
			line-height: 70rpx;
			padding: 0 10rpx;
			color: #999;
		}
		.label {
			width: 180rpx;
			display: inline-block;
		}
		.down {
			float: right;
			margin-top: 20rpx;
		}
		.type-btn {
			width: 80%;
			margin-left: 10%;
			view {
				width: calc(50% - 10rpx);
				display: inline-block;
				line-height: 70rpx;
				border-radius: 8rpx;
				text-align: center;
				border: 1px solid #c1c1c1;
			}
			view:last-child {
				margin-left: 20rpx;
				background-color: #00CA8A;
				border: 1px solid #00CA8A;
				color: #FFFFFF;
			}
		}
	}
	.th {
		font-size: 28rpx;
		line-height: 0.6;
		padding: 10rpx 0;
	}
	.th1 {
		line-height: 76rpx;
	}
	.arrow-fill {
		display: inline-block;
		line-height: 1;
		margin-left: 10rpx;
		view {
			margin-bottom: -10rpx;
		}
	}
	.sx-content {
		background-color: #FFFFFF;
		height: 60rpx;
		position: relative;
		z-index: 11;
		margin-bottom: -10rpx;
	}
	.list {
		margin-bottom: -4rpx;
	}
</style>
